<template>
    <view-box ref="viewBox" body-padding-bottom="55px" style="background: #F3F6F7">
        <tab :line-width="2" class="oungh">
            <tab-item :selected="category === 2" @on-item-click="onItemClick(2)">天南山文化</tab-item>
            <tab-item :selected="category === 3" @on-item-click="onItemClick(3)">天南山读书会</tab-item>
        </tab>
        <panel :list="computedList" class="ong-borde" type="5"></panel>
        <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
            <empty slot="no-results" tips="暂时没有相关内容"></empty>
        </infinite-loading>
        <b-menu slot="bottom" selected="newsPage"></b-menu>
    </view-box>
</template>
<script>
import bMenu from '../components/bottom_menu'
import { ViewBox, Panel, Tab, TabItem } from 'vux'
export default {
  data () {
    return {
      list: [],
      category: 0
    }
  },
  watch: {
    category () {
      this.list = []
      this.$nextTick(() => {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
      })
    }
  },
  computed: {
    computedList () {
      let list = []
      this.list.forEach((item) => {
        list.push({
          src: this.$apiUrl + '/storage/' + item.thumb,
          title: item.title,
          desc: item.description,
          url: '/postNews/' + item.id,
          meta: {
            source: item.from,
            date: item.created_at,
            other: item.editor
          }
        })
      })
      return list
    }
  },
  components: {
    ViewBox,
    Panel,
    Tab,
    TabItem,
    bMenu
  },
  created () {
    this.category = parseInt(this.$route.query.category)
  },
  methods: {
    onItemClick (id) {
      this.category = id
    },
    infiniteHandler ($state) {
      this.$http.get('/posts', {
        params: {
          category_id: this.category,
          page: this.list.length / 20 + 1,
          page_size: 20
        }
      }).then((response) => {
        if (response.data.data.length) {
          this.list = this.list.concat(response.data.data)
          $state.loaded()
          if (!response.data.next_page_url) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      })
    }
  }
}
</script>
<style scoped>
    .order {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .ong-borde{
      width: 92%;
      margin-left: 4%;
      background: 0;
    }
</style>
<style>
.oungh .vux-tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #fff;
    height: 44px;
    width: 92%;
    position: relative;
    margin-left: 4%;
}
.oungh .vux-tab .vux-tab-item.vux-tab-selected {
    color: #32B6C6!important;
    border-bottom: 1px solid #32B6C6!important;
}
.ong-borde .weui-media-box_appmsg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #F3F6F7;
    padding-bottom: 10px;
}
.ong-borde .weui-media-box {
    padding: 15px;
    position: relative;
    background: #fff;
    margin-top: 10px;
    border-radius: 7px;
}
.weui-panel:before {
    border-top: 0px solid #E5E5E5!important;
}
.weui-panel:after {
    border-bottom: 0px solid #E5E5E5!important;
}
.oungh .vux-tab-ink-bar {
  background: 0;
}
.ong-borde .weui-media-box_appmsg .weui-media-box__thumb {
    border-radius: 7px;
}
</style>

